import React, { forwardRef, useCallback } from 'react';
import _ from 'lodash';

import preClassName from '../../../../utils/preClassName';

import { ChartTitleOption } from '../interface';

interface Iprops {
  title: ChartTitleOption;
  style?: React.CSSProperties;
}

export default forwardRef<any, Iprops>((props, ref) => {
  const renderTitle = useCallback((title: ChartTitleOption) => {
    const { text, subtext } = title;
    return (
      <>
        <div className="text" style={{}}>
          {text}
        </div>
        {subtext && (
          <div className="subtext" style={{}}>
            {subtext}
          </div>
        )}
      </>
    );
  }, []);

  if (_.isArray(props.title)) {
  }
  const isShowTitle = _.get(props.title, 'show', false);

  return (
    <div
      className={preClassName('title')}
      ref={ref}
      style={{ ...props.style, height: 20, display: isShowTitle ? 'block' : 'none' }}
    >
      {renderTitle(props.title)}
    </div>
  );
});
